<template>
	<!-- 被访端 -->
	<view class="head-info">
		<view class="info-left" @click="hanldeToRecord(0)">
			<view class="pen-box">
				<view class="pen-img invitation-img">
					<image src="@/static/icon/icon-14.png" mode=""></image>
				
				</view>
				<view class="pen-text">拜访记录</view>
			</view>
			<view class="tips">
				<view class="" style="white-space: nowrap;">
					查看历史访问记录
				</view>
			</view>
		</view>
	
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from "vue"
	import {
		$get,
		$post
	} from "@/utils/request.js"
	import {
		onShareAppMessage,
		onShow,
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from 'vuex'
	
	const store = useStore()
	
	
	const totalNum = ref(0)
	onShow(() => {
		const needClose = uni.getStorageSync('needCloseFlag');
		// 如果标记存在且为true，执行关闭方法
		if (needClose) {
			handleClose({
				show: false
			});
			visitPopup.value.close()
			uni.removeStorageSync('needCloseFlag');
		}
	
	
	});
	
	// 预约记录 actIndex 代表标签栏激活下表
	const hanldeToRecord = (id) => {
		if (id !== null && id !== undefined && id !== '') {
			uni.setStorageSync('actIndex', id);
		}
	
		uni.switchTab({
			url: `/pages/record/record`
		})
	}

</script>

<style lang="scss">
	.head-info {
		width: 100%;
		height: 190px;
		display: flex;
		justify-content: space-between;

		.info-left {
			width: 50%;
			height: 100%;
			background-image: url('../../../../static/img/bg-1.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			border-radius: 15px;


			.pen-box {
				width: 100%;
				height: 100px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 6px;
				margin: 20px 0px;

				.invitation-img {
					position: relative;

					.number-invitation {
						position: absolute;
						right: -40%;
						top: -10%;
						width: 18px;
						height: 18px;
						text-align: center;
						line-height: 18px;
						border-radius: 50%;
						background-color: red;
						color: #fff;
						font-size: var(--font-12);
					}
				}



				.pen-img {
					width: 40px;
					height: 36px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.pen-text {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 600;
				}
			}

			.tips {
				width: 100%;
				color: var(--color-999);
				font-size: var(--font-12);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0px 26px;
				box-sizing: border-box;
			}

		}


	}
</style>